<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/home.css">
</head>

<body>
  
    <h2>我是home页</h2>
    <ul >
       
        <% for(var i=0;i<cates.length;i++) {%>   
        <li style="display:flex; justify-content: space-around;margin-top: 20px;">
        <h2>姓名:<%= cates[i].cateName%></h2>
        <p>
            年龄:<%= cates[i].age%>
        </p>
        <p>
            性别:<%= cates[i].gender%>
        </p>
        <div>
        <button _id="<%= cates[i]._id %>" class="del">删除按钮</button>
        <button _id="<%= cates[i]._id %>" class="up">更新按钮</button>
    </div>
    </li>                

        <%}%>
    </ul>
    <button class="add">点击添加一条数据</button>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
    $('button.add').click(function(){   //点击添加按钮，发送ajax请求
        $.ajax({
            url:'/addCate',     //向addCate 路由发送请求
            type:'POST',      //发送格式
            dataType:'json',
            success:function(res){     //返回参数
                if(res.code===0){
                        //增加成功
                        alert(res.msg)
                        history.go(0 )
                }else{
                        //增加失败
                        alert(res.msg)
                }
            }

        })
    })
    $('.del').click(function(){
        var id =$(this).attr("_id")
        if(confirm('您确定删除吗?')){
            $.ajax({
                url:'/delCate',
                type:'POST',
                data:{
                    id:id
                },
                dataType:'json',
                success:function(res){
                    if(res.code===0){
                        alert(res.msg)
                        history.go(0)
                    }
                    else{
                        alert(res.msg)
                        }
                }
            })

        }
    })

    $('.up').click(function(){
        var id =$(this).attr("_id")
        if(confirm('您确定更新吗?')){
            $.ajax({
                url:'/upCate',
                type:'POST',
                data:{
                    id:id,
                    cateName :"法外狂徒范玉峰",
                    age:"8",
                    gender:"超人"
                },
                dataType:'json',
                success:function(res){
                    if(res.code===0){
                        alert(res.msg)
                        history.go(0)
                    }
                    else{
                        alert(res.msg)
                        }
                }
            })

        }
    })
</script>
</html>
